<template>
    <div style="position: relative;width: 100vw;">
        <div id="capture" ref="captureRef" :style="{
            width: captureWidth + 'px', height: captureHeight + 'px',
            left: captureLeft + 'px', top: captureTop + 'px',
        }" @dragstart="captureStart" @dragend="captureEnd" draggable="true">
            <span id="top_left_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'top_left_point')" @drag="pointdrag"
                @dragend.stop="pointDragEnd($event, 'top_left_point')"></span>

            <span id="top_center_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'top_center_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'top_center_point')"></span>

            <span id="top_right_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'top_right_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'top_right_point')"></span>

            <span id="right_center_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'right_center_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'right_center_point')"></span>

            <span id="bottom_right_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'bottom_right_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'bottom_right_point')"></span>

            <span id="bottom_center_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'bottom_center_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'bottom_center_point')"></span>

            <span id="bottom_left_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'bottom_left_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'bottom_left_point')"></span>

            <span id="left_center_point" class="point" draggable="true"
                @dragstart.stop="pointDragStart($event, 'left_center_point')" @drag.stop="pointdrag"
                @dragend.stop="pointDragEnd($event, 'left_center_point')"></span>
            <slot name="opration" :data="{ captureHeight, captureWidth, captureLeft, captureTop }"></slot>

        </div>
        <slot name="image"></slot>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
let captureHeight = ref()
let captureWidth = ref()

let captureRef = ref()
onMounted(() => {
    captureHeight.value = captureRef.value.clientHeight;
    captureWidth.value = captureRef.value.clientWidth
})

//capture移动
let captureX = ref()
let captuerY = ref()
let captureTop = ref(0)
let captureLeft = ref(0)
let captureMoveFlag = ref(false)
const captureStart = (e: Event) => {
    e.stopImmediatePropagation()
    let es = e as any
    captuerY.value = es.clientY;
    captureX.value = es.clientX;
    captureMoveFlag.value = true
}


const captureEnd = (e: Event) => {
    e.stopImmediatePropagation()
    captureMoveFlag.value = false
    let es = e as any
    captureLeft.value = captureLeft.value + (es.clientX - captureX.value)
    captureTop.value = captureTop.value + (es.clientY - captuerY.value)
}

//记录移动距离
let startPointMoveX = ref()
let startPointMoveY = ref()
let endPointMoveX = ref()
let endPointMoveY = ref()

//拖拽按下
const pointDragStart = (e: Event, type: string) => {
    console.log('start', e);
    let es = e as any
    startPointMoveY.value = es.clientY
    startPointMoveX.value = es.clientX
}

const pointDragEnd = (e: Event, type: string) => {
    let es = e as any
    console.log('end', e);
    if (type == 'top_center_point') {
        captureTop.value = captureTop.value - (startPointMoveY.value - es.clientY)
        captureHeight.value = captureHeight.value + (startPointMoveY.value - es.clientY)
    } else if (type == 'right_center_point') {
        captureWidth.value = captureWidth.value + (es.clientX - startPointMoveX.value)
    } else if (type == 'bottom_center_point') {
        captureHeight.value = captureHeight.value - (startPointMoveY.value - es.clientY)
    } else if (type == 'left_center_point') {
        captureWidth.value = captureWidth.value - (es.clientX - startPointMoveX.value)
        captureLeft.value = captureLeft.value + (es.clientX - startPointMoveX.value)
    } else if (type == 'top_left_point') {
        captureHeight.value = captureHeight.value + (startPointMoveY.value - es.clientY)
        captureTop.value = captureTop.value - (startPointMoveY.value - es.clientY)
        captureWidth.value = captureWidth.value - (es.clientX - startPointMoveX.value)
        captureLeft.value = captureLeft.value + (es.clientX - startPointMoveX.value)
    } else if (type == 'top_right_point') {
        captureHeight.value = captureHeight.value - (es.clientY - startPointMoveY.value)
        captureTop.value = captureTop.value + (es.clientY - startPointMoveY.value)
        captureWidth.value = captureWidth.value - (startPointMoveX.value - es.clientX)
    } else if (type == 'bottom_right_point') {
        captureHeight.value = captureHeight.value - (startPointMoveY.value - es.clientY)
        captureWidth.value = captureWidth.value - (startPointMoveX.value - es.clientX)
    } else if (type == 'bottom_left_point') {
        captureHeight.value = captureHeight.value - (startPointMoveY.value - es.clientY)
        captureWidth.value = captureWidth.value - (es.clientX - startPointMoveX.value)
        captureLeft.value = captureLeft.value + (es.clientX - startPointMoveX.value)
    }
}
let captureTrantionX = ref()
let captureTrantionY = ref()
const pointdrag = (e: Event) => {
    let es = e as any
    captureTrantionX.value = captureWidth.value + (es.clientX - startPointMoveX.value)
    captureTrantionY.value = captureHeight.value + (es.clientY - startPointMoveY.value)
}


</script>

<style>
#capture {
    --height: 50vh;
    --width: 25vw;
    --pointColor: red;
}

#capture {
    width: var(--height);
    height: var(--width);
    position: relative;
    border: 1px red dotted;
    /* transition: width .5s; */
    cursor: grab;
    z-index: 100;
}

.point {
    position: absolute;
    background-color: var(--pointColor);
    border-radius: 100%;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
}

#top_left_point {
    left: 0%;
    top: 0%;
    cursor: nw-resize;
    transform: translate(-50%, -50%);
}

#top_center_point {
    left: 50%;
    top: 0%;
    cursor: n-resize;
}

#top_right_point {
    right: 0%;
    transform: translate(50%, -50%);
    cursor: ne-resize;
}

#right_center_point {
    right: 0%;
    top: 50%;
    transform: translateX(50%);
    cursor: ew-resize;
}

#bottom_right_point {
    right: 0%;
    bottom: 0%;
    transform: translate(50%, 50%);
    cursor: se-resize;
}

#bottom_center_point {
    right: 50%;
    bottom: 0%;
    transform: translateY(50%);
    cursor: ns-resize;
}

#bottom_left_point {
    left: 0%;
    bottom: 0%;
    transform: translate(-50%, 50%);
    cursor: ne-resize;
}

#left_center_point {
    left: 0;
    top: 50%;
    transform: translateX(-50%);
    cursor: ew-resize;
}
</style>
